<template>
  <div>
    <div class="lo">
           <Wq1/>
           <Lun/>
           <Wq2/>
           <h2 class="th2">热门国家<span>更多&nbsp;&gt;</span></h2>
           <Wq3 :data="arr"/>
           <div class="llii">
             <div class="l_i">
                 <span class="snq">多伦多地区</span>
                 <span class="snq">东京都</span>
                 <span class="snq">臭兰多</span>
                 <span class="snq">曼谷</span>
             </div>
           </div>
           <div class="imm">
             <div class="im_m"><img src="img/xq1.jpg"></div>
             <div class="im_m"><img src="img/xq2.jpg"></div>
             <div class="im_m"><img src="img/xq3.jpg"></div>
             <div class="im_m"><img src="img/xq4.jpg"></div>
           </div>

           <h3 class="h33"></h3>
    </div>
  </div>
</template>

<script>
import Wq1 from "@/components/wq1.vue"
import Lun from "@/components/lun.vue"
import Wq2 from "@/components/wq2.vue"
import Wq3 from "@/components/wq3.vue"

export default {
  components:{
    Wq1,Lun,Wq2,Wq3
  },
  data(){
    return{
      arr:[
        {img:"img/cq1.jpg"},
        {img:"img/cq2.jpg"},
        {img:"img/cq3.jpg"},
        {img:"img/cq4.jpg"},
        {img:"img/cq5.jpg"},
        {img:"img/cq6.jpg"},
        {img:"img/cq7.jpg"},
        {img:"img/cq8.jpg"},
        {img:"img/cq9.jpg"},
        {img:"img/cq10.jpg"}
      ]
    }
  }
}
</script>

<style scoped>
/* .lo{
    width: 100%;
    height: 300px;
    background: wheat;
    border: 1px solid red;
} */

.th2{
  width: 90%;
  height: .61rem;
  margin: auto;
  /* background: cornflowerblue; */
  font-size: .21rem;
  line-height: .6rem;
}
.th2 span{
  float: right;
  color: #868e98;
  font-size: .13rem;
}
.llii{
  width: 90%;
  height: .65rem;
  margin: auto;
  padding-top: .1rem;
  /* background: palevioletred; */
}
.llii .l_i{
  width: 100%;
  height: .3rem;
  display: flex;
  justify-content: space-between;
}
.llii .l_i span{
  width: 20%;
  height: 100%;
  text-align: center;
  line-height: .3rem;
  display: block;
  font-size: .13rem;
  background: #f8f8f8;
  border-radius: .05rem;
}
.imm{
  width: 90%;
  height: 1.64rem;
  /* background: palegreen; */
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}
.imm .im_m{
  width: 48%;
  height: 47%;
  /* border: 1px solid red; */
}
.imm .im_m img{
  width: 100%;
  height: 100%;
}
.h33{
  width: 100%;
  height: .53rem;
  /* background: red; */
}
</style>